import { FC,useContext } from "react";
import style from './index.module.scss'
import { infoType } from "@/store/MessageStore";
import {FrownOutline,SmileOutline} from 'antd-mobile-icons'
import Markdown from "../MarkdownBox/Markdown";
import { useDispatch } from "react-redux";
import { setAIMessageIsDeleteByid } from "@/store/MessageStore";
import { OutContext } from "@/pages/index";
type AIMessageType = infoType & {
    position: 'left' | 'right',
    isdelete: 'null' | 'yes' | 'no',
    id:string
}

const AIMessage:FC<AIMessageType> = (props)=>{
    const {value,isdelete,id} = props
    const {sendSystemMessage} = useContext(OutContext)!
    const dispatch = useDispatch()
    /**ai未解决问题 */
    const isSolveedMSg = (data:'yes' | 'no')=>{
        if(isdelete !== 'null') return
        dispatch(setAIMessageIsDeleteByid({id:id,isdelete:data}))
        if(data === 'yes'){

        }else if(data === 'no'){
            sendSystemMessage({
                type:'buttons',
                value:'很抱歉未能解决您的问题'
            })
        }
    }

    return <div className = {style['AIMessage']}>
        <div className={style['top']}>
            <Markdown content={value}></Markdown>
        </div>
        <div className={style['bot']}>
           <div style={{color:isdelete === 'yes' ? '#2b6eff' : '#000000'}} className={style['left']} onClick={()=>{          
            isSolveedMSg('yes')
           }}>
                <SmileOutline />
                <p>已解决</p>
           </div>
           <div style={{color:isdelete === 'no' ? '#2b6eff' : '#000000'}} className={style['rigth']}  onClick={()=>{
            isSolveedMSg('no')
           }}>
                <FrownOutline />   
                <p>未解决</p>           
           </div>
        </div>
    </div>
} 


export default AIMessage